<template>
  <div>
    欢迎光临_vue开发的收银系统_水果店
 <table border="1px">
   <thead><tr><td>苹果10块/斤,折扣 8折 </td></tr></thead>
   <tbody>
     <tr><td>请输入你要购买的斤数<input v-model="jin" type="text"></td></tr>
     <tr><td><button @click="yunsuan">结账买单</button></td></tr>
     <tr><td>结账单:总价:{{zon}}元,折扣后{{zon*0.8}}元,省了{{zon*0.2}}元</td></tr>
   </tbody>
 </table>
  </div>
</template>

<script>
export default {
  name: "TwodayApp",

  data() {
    return {
      zon:10,
      jin:1,
    };
  },



  methods: {
    yunsuan(){
      this.zon=this.jin*10
    }
  },
};
</script>

<style  scoped>
div{
  text-align: center;
}
table {
  width: 100%;
}
</style>